<template>
  <div class="unsupported-browser-view">
    <el-result
      icon="error"
      title="浏览器版本过低"
    >
      <!-- Custom subtitle with icon -->
      <template #sub-title>
        <div class="subtitle-content">
            <!-- Use dynamic component for icon -->
            <span class="browser-icon current-browser-icon" :style="{ width: iconSize, height: iconSize }"> 
              <component :is="iconComponent" v-if="iconComponent" />
            </span>
            <span>您的浏览器 {{ browserInfo.name }} (版本 {{ browserInfo.version ?? 'N/A' }}) 不受支持。请升级到以下版本：{{ requiredVersions }}</span>
        </div>
      </template>

      <template #extra>
        <p>我们建议使用以下现代浏览器以获得最佳体验：</p>
        <div class="browser-links">
          <!-- Chrome Link Block -->
          <a href="https://www.google.com/chrome/" target="_blank" rel="noopener noreferrer" class="browser-link-item">
            <ChromeIcon class="browser-logo" /> 
            <el-button>Google Chrome</el-button> 
          </a>
          <!-- Firefox Link Block -->
          <a href="https://www.mozilla.org/firefox/new/" target="_blank" rel="noopener noreferrer" class="browser-link-item">
            <FirefoxIcon class="browser-logo" />
            <el-button>Mozilla Firefox</el-button>
          </a>
          <!-- Edge Link Block -->
          <a href="https://www.microsoft.com/edge" target="_blank" rel="noopener noreferrer" class="browser-link-item">
            <EdgeIcon class="browser-logo" />
            <el-button>Microsoft Edge</el-button>
          </a>
          <!-- Opera Link Block -->
          <a href="https://www.opera.com/download" target="_blank" rel="noopener noreferrer" class="browser-link-item">
            <OperaIcon class="browser-logo" />
            <el-button>Opera</el-button>
          </a>
        </div>
      </template>
    </el-result>
  </div>
</template>

<script setup lang="ts">
import { ref, shallowRef, watch, defineAsyncComponent } from 'vue';
// import { useI18n } from 'vue-i18n'; // Commented out i18n import
import { useBrowserCompatibility, getRequiredVersionsString } from '@/composables/useBrowserCompatibility';

// Import static icons for download buttons
import ChromeIcon from '@/assets/icons/browsers/chrome.svg?component';
import FirefoxIcon from '@/assets/icons/browsers/firefox.svg?component';
import EdgeIcon from '@/assets/icons/browsers/edge.svg?component';
import OperaIcon from '@/assets/icons/browsers/opera.svg?component';

// const { t } = useI18n(); // Commented out i18n usage
const { browserInfo } = useBrowserCompatibility(); 
const requiredVersions = getRequiredVersionsString(); 

// Use shallowRef for the component
const iconComponent = shallowRef(null);
const iconSize = ref('1.5em'); // Control icon size here

// Function to load icon component dynamically
const loadIcon = (name: string) => {
  console.log('[IconLoader] Attempting to load icon:', name);
  iconComponent.value = defineAsyncComponent({
    loader: async () => {
      try {
        const component = await import(`@/assets/icons/browsers/${name}.svg?component`);
        console.log('[IconLoader] Loaded component for:', name);
        return component.default; 
      } catch (err) {
        console.error(`[IconLoader] Failed to load icon SVG component: ${name}.svg`, err);
        // Attempt to load the fallback icon using the correct name
        try {
            const fallback = await import(`@/assets/icons/browsers/severityknown.svg?component`); // Use correct fallback name
            return fallback.default;
        } catch (fallbackErr) {
            console.error('[IconLoader] Failed to load fallback icon severityknown.svg', fallbackErr);
            return null; 
        }
      }
    },
    // Optional: Add loading/error components for defineAsyncComponent
    // loadingComponent: LoadingComponent, 
    // errorComponent: ErrorComponent,
    // delay: 200,
    // timeout: 3000
  });
};

// Watch for changes in the browser icon identifier
watch(() => browserInfo.value.icon,
    (newIconName) => {
        if (newIconName) {
            loadIcon(newIconName);
        } else {
            // Handle case where icon name might be initially null or undefined
            loadIcon('severityknown'); // Use correct fallback name here too
        }
    },
    { immediate: true } // Run immediately when the component mounts
);

</script>

<style scoped>
.unsupported-browser-view {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; 
  padding: 20px;
  text-align: center;
  background-color: var(--el-bg-color-page);
}

.el-result {
  max-width: 700px; /* Increased max-width */
}

.subtitle-content {
    display: inline-flex; 
    align-items: center;
    gap: 8px; 
    text-align: left; /* Align text left within the flex container */
    max-width: 100%; /* Ensure it doesn't overflow result card */
}

.browser-icon {
    display: inline-flex; /* Ensure SVG aligns properly */
    align-items: center;
    justify-content: center;
    /* Size is controlled by :style binding now */
    flex-shrink: 0; /* Prevent icon from shrinking */
}
.browser-icon svg {
    /* Ensure SVG fills the container */
    width: 100%;
    height: 100%;
}

.browser-links {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap; 
  justify-content: center;
  gap: 30px; /* Increase gap between browser blocks */
}

.browser-link-item {
    display: flex;
    flex-direction: column; 
    align-items: center; 
    text-decoration: none; 
    color: inherit; 
    width: 125px; /* Reduced fixed width */
    text-align: center; 
}

.browser-logo {
    width: 64px;  /* Increased icon size */
    height: 64px; /* Increased icon size */
    margin-bottom: 10px; 
    display: block; 
}

.browser-logo svg {
    width: 100%;
    height: 100%;
}

.browser-link-item .el-button {
  /* Ensure button takes appropriate width or is centered */
   width: 100%; /* Make button take full width of the item */
   box-sizing: border-box; /* Include padding/border in width */
}

p {
  color: var(--el-text-color-secondary);
  margin-bottom: 20px;
}

a {
    text-decoration: none;
}

.current-browser-icon {
  /* Styles specifically for the icon next to the text */
  margin-right: 5px; /* Adjust spacing if needed */
}

.current-browser-icon svg {
  /* Styles specifically for the icon next to the text */
  margin-right: 5px; /* Adjust spacing if needed */
}
</style> 